const { defineConfig } = require('@vue/cli-service')
const path = require('path')
module.exports = defineConfig({
  transpileDependencies: true,
  // 开发服务器配置
  devServer: {
    host: 'localhost',
    port: 8888,
    // 自动打开默认浏览器运行项目
    open: true,
    // 开发时解决跨域 配置反向代理
    proxy: {
      // 开发时 所有请求必须以这个前缀开头才能触发这个反向代理
      '/api': {
        // 自己的服务器地址
        // 单向代理源
        target: 'https://www.fastmock.site/mock/3c03c66e1484d44a5e4272b352bee0da', // 要进入的服务器地址
        // 是否切换源
        changeOrigin: true,
        // 路径重写 重写的值 取决于 真实 完整地址中是否携带 前缀
        /*
          1 真实完整地址如下
            http://xxx.com/api/a/c
            路径重写为 '^/api': '/api'
          2 真实地址中 没有前缀， 为了 反向代理，axios baseURL有 /api
          '^/api': ''

          总结一下：
            真实发出去完整地址
              target + 路径重写的值 + axios（请求路径 不带 /api前缀）
        */
        pathRewrite: {
          '^/api': '/api'
        }
      }
    }
  },
  // 关闭 eslint 保存检查代码
  lintOnSave: false,
  // 自定义路径别名
  chainWebpack: (config) => {
    // 给路径起别名
    config.resolve.alias
      .set('@', path.join(__dirname, 'src'))
      .set('@c', path.join(__dirname, 'src/components'))
      .set('@v', path.join(__dirname, 'src/views'))
      .set('@a', path.join(__dirname, 'src/api'))
      .set('@u', path.join(__dirname, 'src/utils'))
  }
})
